<html>
  <head>
    <title>页面通信</title>
  </head>
  <body>
    <script>
       /*
                七、页面通信

                          1、uni.$emit(eventName,object)

                                      触发全局的自定义事件。附加参数都会传给监听器回调。

                                      属性             类型           描述

                                      eventName       String         事件名

                                      object          Object         触发事件携带的附加参数

                                      

                                      eg：
                                            uni.$emit('update'),{msg:'页面更新'}

                          2、uni.$on(eventName,callBack)

                                     监听全局的自定义事件。事件可以由 uni.$emit触发，回调函数会接收所有传入事件触发函数的额外参数。
                                     
                                     属性               类型               描述
                                     
                                     eventName         String             事件名

                                     callback          Function           事件的回调函数

                                     eg：

                                        uni.$on('update',function(data){
                                          console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
                                        })
                          
                          3、uni.$once(eventName,callback)

                                    监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

                                    属性              类型               描述

                                    eventName        String             事件名

                                    callback         Function           事件的回调函数


                                    eg：

                                        uni.$once('update',function(data){
                                          console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
                                        })


                          4、uni.$off(eventName,callback)
                                                        
                                    移除全局自定义事件监听器。

                                    属性                类型                描述

                                    eventName          String              事件名称

                                    callback           Function            事件的回到函数


                                  注意：

                                        如果没有提供参数，则移除"所有的事件监听器"

                                        如果只提供了事件名，则移除该事件所有的监听器

                                        如果同时提供了事件与回调，则只移除这个回调的监听器

                                        提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器


                                  代码实例：

                                        <template>
                                          <view class="content">
                                            <view class="data">
                                              <text>{{val}}</text>
                                            </view>
                                            <button type="primary" @click="comunicationOff">结束监听</button>
                                          </view>
                                        </template>

                                        export default {
                                            data() {
                                                return {
                                                  val: 0
                                                }
                                            },
                                            onLoad() {
                                                setInterval(()=>{
                                                  uni.$emit('add', {
                                                    data: 2
                                                  })
                                                },1000)
                                                uni.$on('add', this.add)
                                            },
                                            methods: {
                                                comunicationOff() {
                                                  uni.$off('add', this.add)
                                                },
                                                add(e) {
                                                  this.val += e.data
                                                }
                                            }
                                        }
                                  

                      ★、注意事项
                      
                              ①、  uni.$emit、uni.$on、uni.$once、uni.$off 触发的事件都是App全局级别的，

                                   跨任意组件，nvue,vue等。

                              ②、  使用时，注意及时销毁事件监听，比如，页面onLoad里边uni.$on注册监听，

                                   onUnload里边uni.$off 移除，或者一次性的事件，直接使用uni.$once
            */
    </script>
  </body>
</html>